<template>
  <div class="dashboard">
    <div class="navbar">
      <span>ACE mvp</span>
      <span>{{ email }}</span>
    </div>
    <div class="content">
      <div class="menu">
        <ul>
          <li @click="selectMenu('ops')">运维情况</li>
          <li @click="selectMenu('management')">运营管理</li>
          <li>
            PROD环境
            <ul>
              <li @click="selectMenu('prod-job')">Job中心</li>
              <li @click="selectMenu('prod-schedule')">Schedule中心</li>
            </ul>
          </li>
          <li>
            LOCAL环境
            <ul>
              <li @click="selectMenu('local-job')">Job中心</li>
              <li @click="selectMenu('local-schedule')">Schedule中心</li>
            </ul>
          </li>
        </ul>
      </div>
      <div class="main">
        <component :is="currentComponent" :env-id="currentEnvId" :worker-id="currentWorkerId" />
      </div>
    </div>
  </div>
</template>

<script>
import TaskList from '../components/TaskList.vue';
import JobList from '../components/JobList.vue';
import WorkerNodeList from '../components/WorkerNodeList.vue';
import CreateJob from '../components/CreateJob.vue';
import JobCenter from '../components/JobCenter.vue';
import ScheduleCenter from '../components/ScheduleCenter.vue';
import UserList from '../components/UserList.vue';

export default {
  components: { TaskList, JobList, WorkerNodeList, CreateJob, JobCenter, ScheduleCenter, UserList },
  data() {
    return {
      email: localStorage.getItem('email') || '',
      currentComponent: null,
      currentEnvId: '',
      currentWorkerId: '',
    };
  },
  methods: {
    selectMenu(menu) {
      switch (menu) {
        case 'ops':
          this.currentComponent = WorkerNodeList;
          this.currentEnvId = '';
          break;
        case 'management':
          this.currentComponent = UserList;
          this.currentEnvId = '';
          break;
        case 'prod-job':
          this.currentComponent = JobCenter;
          this.currentEnvId = 'PROD';
          break;
        case 'prod-schedule':
          this.currentComponent = ScheduleCenter;
          this.currentEnvId = 'PROD';
          break;
        case 'local-job':
          this.currentComponent = JobCenter;
          this.currentEnvId = 'LOCAL';
          break;
        case 'local-schedule':
          this.currentComponent = ScheduleCenter;
          this.currentEnvId = 'LOCAL';
          break;
      }
    },
  },
};
</script>

<style scoped>
.dashboard {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.navbar {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  background: #f0f0f0;
}
.content {
  display: flex;
  flex: 1;
}
.menu {
  width: 200px;
  background: #e0e0e0;
  padding: 10px;
}
.menu ul {
  list-style: none;
  padding: 0;
}
.menu li {
  cursor: pointer;
  padding: 5px;
}
.main {
  flex: 1;
  padding: 20px;
}
</style>
